﻿@page "/components/menu"
<LayoutContent AnchorItems="@(new[]{"单层导航","双层导航","可分组的侧边导航","可收起的侧边导航","可设置宽度的侧边导航","API"})">
<PageHeader Title="Menu 导航菜单">
    用于承载网站的架构，并提供跳转的菜单列表。
</PageHeader>
<h1>顶部导航</h1>
<br />
<Example Title="单层导航" RunStyle="@Code.BgRun">
    <Description>只存在单层结构的顶部导航，点击即跳转。可在承载单一产品或单一业务线等层级结构简单的网站使用。</Description>
    <RunContent>
        <TMenu>
            <ChildContent>
            <TMenuItem>菜单1</TMenuItem>
            <TMenuItem Active>菜单2</TMenuItem>
            <TMenuItem Disabled>禁用菜单</TMenuItem>
            </ChildContent>
            <OperationContent>
                <a><TIcon Name="IconName.Search" /></a>
                <a><TIcon Name="IconName.Mail" /></a>
                <a><TIcon Name="IconName.User" /></a>
            </OperationContent>
        </TMenu>
        <br />
        <TMenu Dark>
            <ChildContent>
                <TMenuItem>菜单1</TMenuItem>
                <TMenuItem Active>菜单2</TMenuItem>
                <TMenuItem Disabled>禁用菜单</TMenuItem>
            </ChildContent>
            <OperationContent>
                <a><TIcon Name="IconName.Search" /></a>
                <a><TIcon Name="IconName.Mail" /></a>
                <a><TIcon Name="IconName.User" /></a>
            </OperationContent>
        </TMenu>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TMenu>
    <ChildContent>
        <TMenuItem>菜单1</TMenuItem>
        <TMenuItem Active>菜单2</TMenuItem>
        <TMenuItem Disabled>禁用菜单</TMenuItem>
    </ChildContent>
    <OperationContent>
        <a><TIcon Name=""IconName.Search"" /></a>
        <a><TIcon Name=""IconName.Mail"" /></a>
        <a><TIcon Name=""IconName.User"" /></a>
    </OperationContent>
</TMenu>

<TMenu Dark>
    <ChildContent>
        <TMenuItem>菜单1</TMenuItem>
        <TMenuItem Active>菜单2</TMenuItem>
        <TMenuItem Disabled>禁用菜单</TMenuItem>
    </ChildContent>
    <OperationContent>
        <a><TIcon Name=""IconName.Search"" /></a>
        <a><TIcon Name=""IconName.Mail"" /></a>
        <a><TIcon Name=""IconName.User"" /></a>
    </OperationContent>
</TMenu>
```
")
    </CodeContent>
</Example>
<Example Title="双层导航" RunStyle="@Code.BgRun">
    <Description>
        顶部导航下拉菜单收纳2-3级页面导航，可拓展分组展示，常用于多种业务下的快速切换导航。

    </Description>
    <RunContent>
        <TMenu>
            <ChildContent>
                <TMenuItem>菜单1</TMenuItem>
                <TMenuItem Active>菜单2</TMenuItem>
                <TSubMenu Title="菜单3">
                    <TSubMenu Title="菜单3-1">
                        <TMenuItem>菜单3-1-1</TMenuItem>
                        <TMenuItem>菜单3-1-2</TMenuItem>
                    </TSubMenu>
                    <TMenuItem>菜单3-2</TMenuItem>
                    <TMenuItem>菜单3-3</TMenuItem>
                </TSubMenu>
            </ChildContent>
            <OperationContent>
                <a><TIcon Name="IconName.Search" /></a>
                <a><TIcon Name="IconName.Mail" /></a>
                <a><TIcon Name="IconName.User" /></a>
            </OperationContent>
        </TMenu>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TMenu>
    <ChildContent>
        <TMenuItem>菜单1</TMenuItem>
        <TMenuItem Active>菜单2</TMenuItem>
        <TSubMenu Title=""菜单3"">
            <TSubMenu Title=""菜单3-1"">
                <TMenuItem>菜单3-1-1</TMenuItem>
                <TMenuItem>菜单3-1-2</TMenuItem>
            </TSubMenu>
            <TMenuItem>菜单3-2</TMenuItem>
            <TMenuItem>菜单3-3</TMenuItem>
        </TSubMenu>
    </ChildContent>
    <OperationContent>
        <a><TIcon Name=""IconName.Search"" /></a>
        <a><TIcon Name=""IconName.Mail"" /></a>
        <a><TIcon Name=""IconName.User"" /></a>
    </OperationContent>
</TMenu>
```
")
    </CodeContent>
</Example>

<h1>侧边导航</h1>
<small>设置 <code>Aside</code> 成为侧边菜单</small>


        
<Example Title="单层导航" RunStyle="@Code.BgRun">
    <Description>只存在单层结构的侧边导航，点击即跳转。一般与单层顶部导航相结合，作为二级页面的侧边导航。</Description>
    <RunContent>
        <TSpace>
            <TSpaceItem>

                <TMenu Aside>
                    <TMenuItem>菜单1</TMenuItem>
                    <TMenuItem Active>菜单2</TMenuItem>
                    <TMenuItem Disabled>禁用菜单</TMenuItem>
                    <TMenuItem>个人中心</TMenuItem>
                    <TMenuItem>消息</TMenuItem>
                </TMenu>
            </TSpaceItem>
            <TSpaceItem>

                <TMenu Aside Dark>
                    <TMenuItem>菜单1</TMenuItem>
                    <TMenuItem Active>菜单2</TMenuItem>
                    <TMenuItem Disabled>禁用菜单</TMenuItem>
                    <TMenuItem>个人中心</TMenuItem>
                    <TMenuItem>消息</TMenuItem>
                </TMenu>
            </TSpaceItem>
        </TSpace>
        <br />
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TMenu Aside>
    <TMenuItem>菜单1</TMenuItem>
    <TMenuItem Active>菜单2</TMenuItem>
    <TMenuItem Disabled>禁用菜单</TMenuItem>
    <TMenuItem>个人中心</TMenuItem>
    <TMenuItem>消息</TMenuItem>
</TMenu>

<TMenu Aside Dark>
    <TMenuItem>菜单1</TMenuItem>
    <TMenuItem Active>菜单2</TMenuItem>
    <TMenuItem Disabled>禁用菜单</TMenuItem>
    <TMenuItem>个人中心</TMenuItem>
    <TMenuItem>消息</TMenuItem>
</TMenu>
```
")
    </CodeContent>
</Example>
<Example Title="双层导航" RunStyle="@Code.BgRun">
    <Description>
        顶部导航下拉菜单收纳2-3级页面导航，可拓展分组展示，常用于多种业务下的快速切换导航。

    </Description>
    <RunContent>
        <TSpace>
            <TSpaceItem>
                <TMenu Aside>
                    <TMenuItem>菜单1</TMenuItem>
                    <TMenuItem Active>菜单2</TMenuItem>
                    <TSubMenu Title="菜单3">
                        <TMenuItem>菜单3-2</TMenuItem>
                        <TMenuItem>菜单3-3</TMenuItem>
                    </TSubMenu>
                </TMenu>
            </TSpaceItem>
            <TSpaceItem>
                <TMenu Aside Dark>
                    <TMenuItem>菜单1</TMenuItem>
                    <TMenuItem Active>菜单2</TMenuItem>
                    <TSubMenu Title="菜单3">
                        <TMenuItem>菜单3-2</TMenuItem>
                        <TMenuItem>菜单3-3</TMenuItem>
                    </TSubMenu>
                </TMenu>
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TMenu Aside>
    <TMenuItem>菜单1</TMenuItem>
    <TMenuItem Active>菜单2</TMenuItem>
    <TSubMenu Title=""菜单3"">
        <TMenuItem>菜单3-2</TMenuItem>
        <TMenuItem>菜单3-3</TMenuItem>
    </TSubMenu>
</TMenu>


<TMenu Aside Dark>
    <TMenuItem>菜单1</TMenuItem>
    <TMenuItem Active>菜单2</TMenuItem>
    <TSubMenu Title=""菜单3"">
        <TMenuItem>菜单3-2</TMenuItem>
        <TMenuItem>菜单3-3</TMenuItem>
    </TSubMenu>
</TMenu>
```
")
    </CodeContent>
</Example>

<Example Title="可分组的侧边导航" RunStyle="@Code.BgRun">
    <Description>针对大量页面进行分组展示，以方便用户理解及查找。一般在大量业务或者页面需要展示的网站使用。</Description>
    <RunContent>
        <TMenu Aside>
            <TMenuItemGroup Title="分组1">
                <TMenuItem>菜单1</TMenuItem>
            </TMenuItemGroup>
            <TMenuItemGroup Title="分组菜单2">
                <TMenuItem>菜单2</TMenuItem>
                <TMenuItem Active>菜单3</TMenuItem>
                <TMenuItem>菜单4</TMenuItem>
            </TMenuItemGroup>
        </TMenu>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TMenu Aside>
    <TMenuItemGroup Title=""分组1"">
        <TMenuItem>菜单1</TMenuItem>
    </TMenuItemGroup>
    <TMenuItemGroup Title=""分组菜单2"">
        <TMenuItem>菜单2</TMenuItem>
        <TMenuItem Active>菜单3</TMenuItem>
        <TMenuItem>菜单4</TMenuItem>
    </TMenuItemGroup>
</TMenu>
```
")
    </CodeContent>
</Example>

<Example Title="可收起的侧边导航" RunStyle="@Code.BgRun">
    <Description>
        在侧边导航上提供收起按钮，点击后可以将侧边栏最小化，常见于带有图标的侧边导航。
    </Description>
    <RunContent>
        <TSpace>
            <TSpaceItem>
                <TMenu Aside TCollapse>
                    <LogoContent>
                        <span>Logo</span>
                    </LogoContent>
                    <ChildContent>
                    <TMenuItem IconPrefix="IconName.Dashboard" Active>仪表盘</TMenuItem>
                    <TMenuItem IconPrefix="IconName.User">用户中心</TMenuItem>
                    <TMenuItem IconPrefix="IconName.Mail">消息中心</TMenuItem>
                    </ChildContent>
                </TMenu>
            </TSpaceItem>
            <TSpaceItem>
                <TMenu Aside Dark TCollapse>
                    <LogoContent>
                        <span>Logo</span>
                    </LogoContent>
                    <ChildContent>
                        <TMenuItem IconPrefix="IconName.Dashboard" Active>仪表盘</TMenuItem>
                        <TMenuItem IconPrefix="IconName.User">用户中心</TMenuItem>
                        <TMenuItem IconPrefix="IconName.Mail">消息中心</TMenuItem>
                    </ChildContent>
                </TMenu>
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TMenu Aside TCollapse>
    <LogoContent>
        Logo
    </LogoContent>
    <ChildContent>
        <TMenuItem IconPrefix=""IconName.Dashboard"" Active>仪表盘</TMenuItem>
        <TMenuItem IconPrefix=""IconName.User"">用户中心</TMenuItem>
        <TMenuItem IconPrefix=""IconName.Mail"">消息中心</TMenuItem>
    </ChildContent>
</TMenu>

<TMenu Aside Dark TCollapse>
    <LogoContent>
        Logo
    </LogoContent>
    <ChildContent>
        <TMenuItem IconPrefix=""IconName.Dashboard"" Active>仪表盘</TMenuItem>
        <TMenuItem IconPrefix=""IconName.User"">用户中心</TMenuItem>
        <TMenuItem IconPrefix=""IconName.Mail"">消息中心</TMenuItem>
    </ChildContent>
</TMenu>
```
")
    </CodeContent>
</Example>

<Example Title="可设置宽度的侧边导航" RunStyle="@Code.BgRun">
    <Description>
        通过 <code>Width</code> 设置侧边导航的宽度。
    </Description>
    <RunContent>
        <TSpace>
            <TSpaceItem>
                <TMenu Aside>
                    <LogoContent>
                        <span>Logo</span>
                    </LogoContent>
                    <ChildContent>
                    <TMenuItem IconPrefix="IconName.Dashboard" Active>仪表盘</TMenuItem>
                    <TMenuItem IconPrefix="IconName.User">用户中心</TMenuItem>
                    <TMenuItem IconPrefix="IconName.Mail">消息中心</TMenuItem>
                    </ChildContent>
                </TMenu>
            </TSpaceItem>
            <TSpaceItem>
                <TMenu Aside Width="150">
                    <LogoContent>
                        <span>Logo</span>
                    </LogoContent>
                    <ChildContent>
                        <TMenuItem IconPrefix="IconName.Dashboard" Active>仪表盘</TMenuItem>
                        <TMenuItem IconPrefix="IconName.User">用户中心</TMenuItem>
                        <TMenuItem IconPrefix="IconName.Mail">消息中心</TMenuItem>
                    </ChildContent>
                </TMenu>
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TMenu Aside>
    <LogoContent>
        Logo
    </LogoContent>
    <ChildContent>
        <TMenuItem IconPrefix=""IconName.Dashboard"" Active>仪表盘</TMenuItem>
        <TMenuItem IconPrefix=""IconName.User"">用户中心</TMenuItem>
        <TMenuItem IconPrefix=""IconName.Mail"">消息中心</TMenuItem>
    </ChildContent>
</TMenu>

<TMenu Aside Width=""150"">
    <LogoContent>
        Logo
    </LogoContent>
    <ChildContent>
        <TMenuItem IconPrefix=""IconName.Dashboard"" Active>仪表盘</TMenuItem>
        <TMenuItem IconPrefix=""IconName.User"">用户中心</TMenuItem>
        <TMenuItem IconPrefix=""IconName.Mail"">消息中心</TMenuItem>
    </ChildContent>
</TMenu>
```
")
    </CodeContent>
    </Example><div id="API"></div>
<ComponentAPI Component="typeof(TMenu)"></ComponentAPI>
<ComponentAPI Component="typeof(TMenuItem)"></ComponentAPI>
</LayoutContent>